// 在vue2中的使用过程是
// import Vuex from 'vuex'
// import Vue from 'vue'
// Vue.use(Vuex)
// const store = new Vuex.store({
//   state: {
//   },
//   getters: {

//   },
//   mutations: {
//   },
//   actions: {
//   },
//   modules: {
//   }
// })
// vue3中的用法
// Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
import { createStore } from 'vuex'

export default createStore({
  state: { // 存储状态的方法
    count: 1,
    createTime: '2021-12-12 12:12:12',
    topics: [] // 接收请求回来的主题数据
  },
  getters: {
    formateTime(state) { 
      // 在3.0版本中数据没有缓存 但是这是一个问题 该问题将会在3.1版本中进行修复
      // getter其实就相当于一个起算属性 他的属性会像vue的计算属性一样 将属性缓存下来
      // 只有当依赖的state中的数据发生变化的时候才会重新触发函数
      // console.log('时间改变了');
      let date = new Date(state.createTime) // 将数据转化为日期格式
      let year = date.getFullYear() // 获取年份
      let month = date.getMonth() + 1 // 获取月份
      let day = date.getDate() // 获取几号
      return year + '-' + month + '-' + day
    }
  },
  mutations: { // 修改state数据的唯一方法就是提交mutation mutation提交修改数据只能进行同步数据操作
    mnus(state) { // 控制count的值每次减一
      state.count--
    },

    increment(state, params) { // 控制count的值每次加1
      // console.log(params);
      state.count += params.value1
    },

    changeTime(state) {
      state.createTime = new Date()
    },

    changeTopics(state, data) {
      state.topics = data
    }
  },

  actions: { // action不能直接修改数据 而是需要通过提交mutation修改数据
    // 但是action可以包含异步操作
    // js中的异步操作：事件绑定: 鼠标事件、键盘事件、表单事件、触摸事件
    // 定时器、setInterval setTimeout
    // ajax等 原生ajax axios fetch等
    // fetch 是对ajax请求的封装 他就是window上的一个对象 所以不需要安装 可以直接使用
    getTopics({commit, state}) {
      // console.log(context);
      fetch('https://cnodejs.org/api/v1/topics', {method: 'get'}).then((res) =>res.json()).then(res => {
        // console.log(res);
        commit('changeTopics', res.data)
        // state.topics = res.data  // 虽然这种形式也能达到修改数据的目的 但是 不符合vuex规范 不建议使用
        // 还有就是 plugins有个数据持久化的工具 该工具只有在提交mutation的时候才会重新进行数据存储
        // 所以改变数据的时候还是要求大家通过提交mutation来进行修改
      })
    }
    
  },
  modules: {
  }
})
